<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div><h1 id="-api">文件操作API</h1>
<h2 id="labdoc-header-0">一、实验介绍</h2>
<p>在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的web应用依赖了第三方的插件，而不是很独立。
在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。有了操作文件的API，让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作。接下来主要给大家介绍文件读取的几个API。</p><h2 id="labdoc-header-1">二、实验步骤</h2>
<h3 id="labdoc-header-2">2.1几个重要的JS对象</h3>
<h4 id="2-1-1-filelist-">2.1.1 FileList对象</h4>
<p>它是File对象的一个集合，在HTML4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置<code>multiple</code>，就支持多文件上传，所以从此标签中获取的<code>files</code>属性就是<code>FileList</code>对象实例。
demo：<code>&lt;input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /&gt;</code>;
下面是关于<code>FileList</code>对象的API的原型：</p><pre><code class="hljs objectivec">interface FileList {
      <span class="hljs-keyword"><span class="hljs-keyword">getter</span></span> File? item(<span class="hljs-keyword"><span class="hljs-keyword">unsigned</span></span> <span class="hljs-keyword"><span class="hljs-keyword">long</span></span> index);
      <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute <span class="hljs-keyword"><span class="hljs-keyword">unsigned</span></span> <span class="hljs-keyword"><span class="hljs-keyword">long</span></span> length;
};
</code></pre><h4 id="2-1-2-blob-">2.1.2 Blob对象</h4>
<p>其实就是一个原始数据对象，它提供了<code>slice</code>方法可以读取原始数据中的某块数据。另外有两个属性：<code>size</code>（数据的大小），<code>type</code>（数据的MIME类型;
看下面的是W3C的API原型:</p><pre><code class="hljs cs"><span class="hljs-keyword"><span class="hljs-keyword">interface</span></span> <span class="hljs-title"><span class="hljs-title">Blob</span></span> {
    <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute unsigned <span class="hljs-keyword"><span class="hljs-keyword">long</span></span> <span class="hljs-keyword"><span class="hljs-keyword">long</span></span> size;
    <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute DOMString type;
    <span class="hljs-comment"><span class="hljs-comment">//slice Blob into byte-ranged chunks     </span></span>
    <span class="hljs-function"><span class="hljs-function">Blob </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">slice</span></span></span><span class="hljs-function">(</span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">
        optional </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">long</span></span></span></span><span class="hljs-function"><span class="hljs-params"> </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">long</span></span></span></span><span class="hljs-function"><span class="hljs-params"> start,
        optional </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">long</span></span></span></span><span class="hljs-function"><span class="hljs-params"> </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">long</span></span></span></span><span class="hljs-function"><span class="hljs-params"> end,
        optional DOMString contentType
    </span></span></span><span class="hljs-function">)</span></span>; 
};
</code></pre><h4 id="2-1-3-file-">2.1.3 File对象</h4>
<p>继承自Blob对象，指向一个具体的文件，它还有两个属性：<code>name</code>（文件名）,<code>lastModifiedDate</code>（最后修改时间）;
W3C的标准：</p><pre><code class="hljs cs"><span class="hljs-keyword"><span class="hljs-keyword">interface</span></span> <span class="hljs-title"><span class="hljs-title">File</span></span> : <span class="hljs-title"><span class="hljs-title">Blob</span></span> {
    <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute DOMString name;
    <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute Date lastModifiedDate;
};
</code></pre><h4 id="2-1-4-filereader-">2.1.4 FileReader对象</h4>
<p>设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，非常高效。
W3C的标准：</p><pre><code class="hljs cs">[<span class="hljs-meta">Constructor</span>]
<span class="hljs-keyword"><span class="hljs-keyword">interface</span></span> <span class="hljs-title"><span class="hljs-title">FileReader</span></span>: <span class="hljs-title"><span class="hljs-title">EventTarget</span></span> {
    <span class="hljs-comment"><span class="hljs-comment">// async read methods</span></span>
    <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">void</span></span></span><span class="hljs-function"> </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">readAsArrayBuffer</span></span></span><span class="hljs-function">(</span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">Blob blob</span></span></span><span class="hljs-function">)</span></span>;
    <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">void</span></span></span><span class="hljs-function"> </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">readAsBinaryString</span></span></span><span class="hljs-function">(</span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">Blob blob</span></span></span><span class="hljs-function">)</span></span>;
    <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">void</span></span></span><span class="hljs-function"> </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">readAsText</span></span></span><span class="hljs-function">(</span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">Blob blob, optional DOMString encoding</span></span></span><span class="hljs-function">)</span></span>;
    <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">void</span></span></span><span class="hljs-function"> </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">readAsDataURL</span></span></span><span class="hljs-function">(</span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">Blob blob</span></span></span><span class="hljs-function">)</span></span>;

    <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">void</span></span></span><span class="hljs-function"> </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">abort</span></span></span><span class="hljs-function">(</span><span class="hljs-params"></span><span class="hljs-function"><span class="hljs-params"></span>)</span></span>;

    <span class="hljs-comment"><span class="hljs-comment">// states  </span></span>
    <span class="hljs-keyword"><span class="hljs-keyword">const</span></span> unsigned <span class="hljs-keyword"><span class="hljs-keyword">short</span></span> EMPTY = <span class="hljs-number"><span class="hljs-number">0</span></span>;
    <span class="hljs-keyword"><span class="hljs-keyword">const</span></span> unsigned <span class="hljs-keyword"><span class="hljs-keyword">short</span></span> LOADING = <span class="hljs-number"><span class="hljs-number">1</span></span>;
    <span class="hljs-keyword"><span class="hljs-keyword">const</span></span> unsigned <span class="hljs-keyword"><span class="hljs-keyword">short</span></span> DONE = <span class="hljs-number"><span class="hljs-number">2</span></span>;

    <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute unsigned <span class="hljs-keyword"><span class="hljs-keyword">short</span></span> readyState;

    <span class="hljs-comment"><span class="hljs-comment">// File or Blob data</span></span>
    <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute any result;
    <span class="hljs-keyword"><span class="hljs-keyword">readonly</span></span> attribute DOMError error;

    <span class="hljs-comment"><span class="hljs-comment">// event handler attributes</span></span>
    attribute [TreatNonCallableAsNull] Function? onloadstart;
    attribute [TreatNonCallableAsNull] Function? onprogress;
    attribute [TreatNonCallableAsNull] Function? onload;
    attribute [TreatNonCallableAsNull] Function? onabort;
    attribute [TreatNonCallableAsNull] Function? onerror;
    attribute [TreatNonCallableAsNull] Function? onloadend;
};
</code></pre><p>这个对象是非常重要的一个对象，它提供了四个读取文件数据的方法，这些方法都是异步的方式读取数据，读取成功后就直接将结果放到属性<code>result</code>中。所以一般就是直接读取数据，然后监听此对象的<code>onload</code>事件，然后在事件里面读取<code>result</code>属性，再做后续处理。当然<code>abort</code>就是停止读取的方法。</p><p><strong>FileReader对象的三个读取文件数据方法</strong></p><ul>
<li><code>readAsBinaryString(Blob blob)</code>
传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。</li>
<li><code>readAsText(Blob blob, optional DOMString encoding)</code>
第一个参数传入Blob对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。</li>
<li><code>readAsDataURL(Blob blob)</code>
传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。</li>
</ul>
<h3 id="labdoc-header-3">2.2 读取文件上传控件里的文件并将内容已不同的方式展现到浏览器</h3>
<p>在展示代码之前，之前我们操作一个图片文件，都是先将图片上传到服务器端，然后再使用一个<code>img</code>标签指向到服务器的<code>url</code>地址，然后再进行一个使用第三方插件进行图片处理，而现在这一切都不需要服务器端了，因为<code>FileReader</code>对象提供的几个读取文件的方法变得异常简单，而且全部是客户端js的操作。</p><p>实例一：获取上传文件的文件名（注：需要引入jQuery）</p><pre><code class="hljs xml"><span class="hljs-meta"><span class="hljs-meta">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">html</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">xmlns</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"http://www.w3.org/1999/xhtml"</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">head</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">title</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">title</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">src</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"Scripts/jquery-1.5.1.js"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="undefined"></span><span class="hljs-tag"><span class="undefined"></span><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="javascript"><span class="javascript">
        $(</span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function"> (</span></span><span class="hljs-params"></span><span class="javascript"><span class="hljs-function"><span class="hljs-params"></span>) </span></span></span><span class="javascript">{
            $(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"#btnGetFile"</span></span></span><span class="javascript">).click(</span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function"> (</span></span><span class="hljs-params"><span class="javascript"><span class="hljs-function"><span class="hljs-params">e</span></span></span></span><span class="javascript"><span class="hljs-function">) </span></span></span><span class="javascript">{
                </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> fileList = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"fileDemo"</span></span></span><span class="javascript">).files;
                </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">for</span></span></span><span class="javascript"> (</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> i = </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">0</span></span></span><span class="javascript">; i &lt; fileList.length; i++) {
                    </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">if</span></span></span><span class="javascript"> (!(</span><span class="hljs-regexp"><span class="javascript"><span class="hljs-regexp">/image\/\w+/</span></span></span><span class="javascript">.test(fileList[i].type))) {
                         $(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"#result"</span></span></span><span class="javascript">).append(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"&lt;span&gt;type:"</span></span></span><span class="javascript">+fileList[i].type+</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"--******非图片类型*****--name:"</span></span></span><span class="javascript">+fileList[i].name+</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"--size:"</span></span></span><span class="javascript">+fileList[i].size+</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"&lt;/span&gt;&lt;br /&gt;"</span></span></span><span class="javascript">);
                    }
                    </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">else</span></span></span><span class="javascript"> {
                        $(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"#result"</span></span></span><span class="javascript">).append(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"&lt;span&gt;type:"</span></span></span><span class="javascript">+fileList[i].type+</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"--name:"</span></span></span><span class="javascript">+fileList[i].name+</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"--size:"</span></span></span><span class="javascript">+fileList[i].size+</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"&lt;/span&gt;&lt;br /&gt;"</span></span></span><span class="javascript">);
                    }
                }
            });
        });
    </span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">head</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">body</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">form</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">action</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"/home/index"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">method</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"POST"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">novalidate</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"true"</span></span></span><span class="hljs-tag">&gt;</span></span>
        <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">input</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"file"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">multiple</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"multiple"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">name</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"fileDemo"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"fileDemo"</span></span></span><span class="hljs-tag"> /&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">br</span></span></span><span class="hljs-tag">/&gt;</span></span>
        <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">input</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"button"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">value</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"获取文件的名字"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"btnGetFile"</span></span></span><span class="hljs-tag">/&gt;</span></span>
        <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"result"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">form</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">hr</span></span></span><span class="hljs-tag">/&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">body</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">html</span></span></span><span class="hljs-tag">&gt;</span></span>
</code></pre><p>实例二：读取上传文件内容，然后将文件内容直接读取到浏览器上（注：需要引入jQuery）</p><pre><code class="hljs xml"><span class="hljs-meta"><span class="hljs-meta">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">html</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">xmlns</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"http://www.w3.org/1999/xhtml"</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">head</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">title</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">title</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">src</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"Scripts/jquery-1.5.1.js"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="undefined"></span><span class="hljs-tag"><span class="undefined"></span><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="javascript"><span class="javascript">
        </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">if</span></span></span><span class="javascript">(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">typeof</span></span></span><span class="javascript"> FileReader == </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"undified"</span></span></span><span class="javascript">) {
            alert(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"您老的浏览器不行了！"</span></span></span><span class="javascript">);
        }

        </span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function"> </span></span><span class="hljs-title"><span class="javascript"><span class="hljs-function"><span class="hljs-title">showDataByURL</span></span></span></span><span class="javascript"><span class="hljs-function">(</span></span><span class="hljs-params"></span><span class="javascript"><span class="hljs-function"><span class="hljs-params"></span>) </span></span></span><span class="javascript">{
            </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> resultFile = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"fileDemo"</span></span></span><span class="javascript">).files[</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">0</span></span></span><span class="javascript">];
            </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">if</span></span></span><span class="javascript"> (resultFile) {
                </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> reader = </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">new</span></span></span><span class="javascript"> FileReader();
                reader.readAsDataURL(resultFile);
                reader.onload = </span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function"> (</span></span><span class="hljs-params"><span class="javascript"><span class="hljs-function"><span class="hljs-params">e</span></span></span></span><span class="javascript"><span class="hljs-function">) </span></span></span><span class="javascript">{
                    </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> urlData = </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.result;
                    </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"result"</span></span></span><span class="javascript">).innerHTML += </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"&lt;img src='"</span></span></span><span class="javascript"> + urlData + </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"' alt='"</span></span></span><span class="javascript"> + resultFile.name + </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"' /&gt;"</span></span></span><span class="javascript">;
                }; 
            }
        } 

        </span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function"> </span></span><span class="hljs-title"><span class="javascript"><span class="hljs-function"><span class="hljs-title">showDataByBinaryString</span></span></span></span><span class="javascript"><span class="hljs-function">(</span></span><span class="hljs-params"></span><span class="javascript"><span class="hljs-function"><span class="hljs-params"></span>) </span></span></span><span class="javascript">{
            </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> resultFile = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"fileDemo"</span></span></span><span class="javascript">).files[</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">0</span></span></span><span class="javascript">];
            </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">if</span></span></span><span class="javascript"> (resultFile) {
                </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> reader = </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">new</span></span></span><span class="javascript"> FileReader();
                </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//异步方式，不会影响主线程</span></span></span><span class="javascript">
                reader.readAsBinaryString(resultFile);
                reader.onload = </span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function">(</span></span><span class="hljs-params"><span class="javascript"><span class="hljs-function"><span class="hljs-params">e</span></span></span></span><span class="javascript"><span class="hljs-function">) </span></span></span><span class="javascript">{
                    </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> urlData = </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.result;
                    </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"result"</span></span></span><span class="javascript">).innerHTML += urlData;
                };
            }
        }

        </span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function"> </span></span><span class="hljs-title"><span class="javascript"><span class="hljs-function"><span class="hljs-title">showDataByText</span></span></span></span><span class="javascript"><span class="hljs-function">(</span></span><span class="hljs-params"></span><span class="javascript"><span class="hljs-function"><span class="hljs-params"></span>) </span></span></span><span class="javascript">{
            </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> resultFile = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"fileDemo"</span></span></span><span class="javascript">).files[</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">0</span></span></span><span class="javascript">];
            </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">if</span></span></span><span class="javascript"> (resultFile) {
                </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> reader = </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">new</span></span></span><span class="javascript"> FileReader();
                reader.readAsText(resultFile,</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'gb2312'</span></span></span><span class="javascript">);
                reader.onload = </span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function"> (</span></span><span class="hljs-params"><span class="javascript"><span class="hljs-function"><span class="hljs-params">e</span></span></span></span><span class="javascript"><span class="hljs-function">) </span></span></span><span class="javascript">{
                    </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> urlData = </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.result;
                    </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"result"</span></span></span><span class="javascript">).innerHTML += urlData;
                };
            }
        }

    </span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">head</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">body</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">input</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"file"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">name</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"fileDemo"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"fileDemo"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">multep</span></span></span><span class="hljs-tag">/&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">input</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"button"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">value</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"readAsDataURL"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"readAsDataURL"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">onclick</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"showDataByURL();"</span></span></span><span class="hljs-tag">/&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">input</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"button"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">value</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"readAsBinaryString"</span></span></span><span class="hljs-tag">  </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"readAsBinaryString"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">onclick</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"showDataByBinaryString();"</span></span></span><span class="hljs-tag">/&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">input</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"button"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">value</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"readAsText"</span></span></span><span class="hljs-tag">  </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"readAsText"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">onclick</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"showDataByText();"</span></span></span><span class="hljs-tag">/&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"result"</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">body</span></span></span><span class="hljs-tag">&gt;</span></span>
<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">html</span></span></span><span class="hljs-tag">&gt;</span></span>
</code></pre><h2 id="labdoc-header-4">三、实验总结</h2>
<p>有了文件操作的API后，让JS进一步的操作本地文件的得到空前的加强，HTML5对于客户端Web应用得到进一步功能的提升，HTML5的趋势让Web更加富客户端化，而这些都需要让我们的HTML或者JS变得更加强大，而HTML5正是适时地推出了File API。</p></div>
</body>
</html>